<!--conf
<sample>
              <product version="1.5" edition="pro"/>
                     <modifications>
                            <modified date="070101"/>
                     </modifications>
               </sample>
 --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Saving/restoring columns' states</title>
	
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
</head>

<body>
	
	<h1>Saving\restoring columns' states</h1>
	<p>Try to sort, move columns or change their width and then reload page. Grid's API allows to restore these states automatically or on demand *</p>
	<table width="600" cellpadding="0" cellspacing="0">
		<tr>
			<td>
				
				<div id="gridbox" style="width:100%;height:270px;background-color:white;"></div>
				<div align="center">
				<table cellspacing="3" cellpadding="0" border="0">
				<tr><td align="right"> <input type="button" name="a1" value="save columns width" onclick="mygrid.saveSizeToCookie()"></td><td width="5" rowspan="3"></td><td bgcolor="black" rowspan="3" width="1"></td><td width="5" rowspan="3"></td><td><input type="button" name="a1" value="restore columns width" onclick="mygrid.loadSizeFromCookie()"></td></tr>
				<tr><td align="right"><input type="button" name="a1" value="save sorting" onclick="mygrid.saveSortingToCookie()"></td><td><input type="button" name="a1" value="restore sorting" onclick="mygrid.loadSortingFromCookie()"></td></tr>
				<tr><td align="right"><input type="button" name="a1" value="save order" onclick="mygrid.saveOrderToCookie()"></td><td><input type="button" name="a1" value="restore order" onclick="mygrid.loadOrderFromCookie()"></td></tr>
				</table>
					</div>
			</td>
		</tr>
		<tr>
			<td>
				<p>Automatically Save/Restore columns' states</p>
				<div id="gridbox2" style="width:100%;height:270px;background-color:white;"></div>

			</td>
		</tr>
		
</table>
<br>
* - cookies must be enabled

<script>
    mygrid = new dhtmlXGridObject('gridbox');
	mygrid.setImagePath("../../../codebase/imgs/");
	mygrid.enableColumnMove(true)
	mygrid.setSkin("dhx_skyblue")
	mygrid.loadXML("../common/gridH.xml");

    mygrid2 = new dhtmlXGridObject('gridbox2');
	mygrid2.setImagePath("../../../codebase/imgs/");
	mygrid2.enableColumnMove(true)
	mygrid2.setSkin("dhx_skyblue")
	mygrid2.loadXML("../common/gridH.xml",function(){
		mygrid2.loadOrderFromCookie(); 
		mygrid2.loadSortingFromCookie();
		mygrid2.loadSizeFromCookie();
		
		mygrid2.enableAutoSizeSaving();
		mygrid2.enableSortingSaving();
		mygrid2.enableOrderSaving();
	});
</script>


</body>
</html>
